<template>
  <div id="cesiumContainer"></div>
  <el-select class="interType" v-model="interType" @change="typeChange">
    <el-option :value="1" label="线性"></el-option>
    <el-option :value="2" label="平滑"></el-option>
  </el-select>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { KyViewer } from "../plugins/cesium/index.js";

const interType = ref(1);
let viewer = null;
let entity = null;
const start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
const stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
onMounted(() => {
  initMap();
});

function initMap() {
  // 官网申请的Token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWVkZGUxZC1hOTUxLTRiN2UtODgwNC01NTU5NGE3N2E5OTMiLCJpZCI6OTE1NzUsImlhdCI6MTY1MTExNjMwMX0._Zy9FObZndU-FXugY1UkGJMwlCmB4jSN1Yk-_5rdw5s";
  viewer = new KyViewer("cesiumContainer", {
    animation: true,
    shouldAnimate: true,
    timeline: true,
  });
  console.log("开始结束时间", start, stop);
  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
  viewer.clock.multiplier = 10;

  //Set timeline to simulation bounds
  viewer.timeline.zoomTo(start, stop);
  //Compute the entity position property.
  const position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);

  //Actually create the entity
  entity = viewer.entities.add({
    //Set the entity availability to the same interval as the simulation time.
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: stop,
      }),
    ]),

    //Use our computed positions
    position: position,

    //Automatically compute orientation based on position movement.
    orientation: new Cesium.VelocityOrientationProperty(position),

    //Load the Cesium plane model to represent the entity
    model: {
      uri: "./Cesium_Air.glb",
      minimumPixelSize: 64,
    },

    //Show the path as a pink line sampled in 1 second increments.
    path: {
      resolution: 1,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.YELLOW,
      }),
      width: 10,
    },
  });
  viewer.zoomTo(
    entity,
    new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 20000),
  );
}

function computeCirclularFlight(lon, lat, radius) {
  const property = new Cesium.SampledPositionProperty();
  for (let i = 0; i <= 360; i += 45) {
    const radians = Cesium.Math.toRadians(i);
    const time = Cesium.JulianDate.addSeconds(
      start,
      i,
      new Cesium.JulianDate(),
    );
    const position = Cesium.Cartesian3.fromDegrees(
      lon + radius * 1.5 * Math.cos(radians),
      lat + radius * Math.sin(radians),
      Cesium.Math.nextRandomNumber() * 500 + 1750,
    );
    property.addSample(time, position);

    //Also create a point for each sample we generate.
    viewer.entities.add({
      position: position,
      point: {
        pixelSize: 8,
        color: Cesium.Color.TRANSPARENT,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
      },
    });
  }
  return property;
}

function typeChange() {
  console.log("选择改变", interType.value);
  if (interType.value == 2) {
    console.log("选择了平滑");
    entity.position.setInterpolationOptions({
      interpolationDegree: 2,
      interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
    });
  } else {
    entity.position.setInterpolationOptions({
      interpolationDegree: 2,
      interpolationAlgorithm: Cesium.LinearApproximation,
    });
  }
}
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
.interType{
  position: absolute;
  width: 150px;
  bottom: 120px;
  left: 20px;
}
</style>